Linking models

Linking models properly will allow model generator to handle duplicated items automatically and even skips the API request if the data already exists in the store.

Linking models will also allow model generator to use the include fields of the linked model, so that you don't have to add includes of deeply nested items to your model config.

If you are looking for a deeper dive into how model generator stores data, here are the docs for our internal data structure.

Linking a model

Lets say we have 2 models in our application. The first one is a simple Contact and the other one is a Property.

type Contact = {
  id: string;
  name: string;
  email: string;
};

type Property = {
  id: string;
  address: string;
  owner: Contact;
};

The models for these items might look something like this.

export const contactsModel = new Generator<Contact>(
  'contacts'
).createEntityModel();

export const propertiesModel = new Generator<Property>(
  'properties'
).createEntityModel();

Now, lets assume we want to build a table to display all the properties we have in our system. We can load the properties using a query, which includes the owner field. One of the columns in the table links to the contact page of the owner. When the user clicks on one of the owners, model generator would make a new request to the API asking for that contact item. This request is actually unnecessary since we already have the item in our store as part of the property item. If we had linked the two models properly, model generator would automatically use data from the store.

How do we link models? We are simply passing the model in the config.

Here we are linking the owner field of the property to the contact model.

import { contactsModel } from './contacts-model';

const config = {
  entities: {
    related: {
      owner: {
        include: 'owner',
        model: contactsModel
      }
    }
  }
};

export const propertiesModel = new Generator<Property>(
  'properties',
  config
).createEntityModel();

If you load a property now, the owner will be added to the contact model list and its id will be linked in the property related meta data field. When the data is consumed model generator will automatically resolve the id with its model entry data. For more details about how the data is stored, check out the documentation for the internal data structure.

Linking a model list

If the field you want to link consists of a list of items, you can still link them with their respective model.

In this example the tenants field consists of a list of contacts. To link the model we just need to pass it as an array, to indicate to model generator that we expect a list of contacts to be in this field.

import { contactsModel } from './contacts-model';

const config = {
  entities: {
    related: {
      tenants: {
        include: 'tenants',
        model: [contactsModel]
      }
    }
  }
};

export const propertiesModel = new Generator<Property>(
  'properties',
  config
).createEntityModel();

Gotchas

If the API does not return ids for the items in the field, model generator does not have anything to store the items with. Every item will end up in the undefined field of the model item list, which means that only the last item in the list will make it into the store.

You can solve this by giving each item an id manually.